<template>
  <el-form :inline="true" size="mini">
    <el-form-item :label="labelArr[0]">
      <el-input v-model.trim="query.title"></el-input>
    </el-form-item>
    <el-form-item v-if="selectFalse" :label="labelArr[1]">
      <!-- clearable 清空按钮，filterable 是否可搜索 -->
      <el-select
        v-model="query.status"
        clearable
        filterable
        style="width: 110px"
      >
        <!-- :value="1" 是数字1，value="1"是字符串“1 0: 已删除, 1:未审核，2:审核通过，3：审核未通过-->
        <el-option
          :value="i.value"
          :label="i.label"
          v-for="i in statusOptions"
          :key="i.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button icon="el-icon-search" type="primary" @click="queryData"
        >查询
      </el-button>
      <el-button icon="el-icon-refresh" class="filter-item" @click="reload"
        >重置
      </el-button>
      <el-button
        v-if="btnFalse"
        type="primary"
        size="mini"
        @click="add"
        icon="el-icon-circle-plus-outline"
        >新增
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    query: {
      type: Object,
      default: {}
    },
    statusOptions: {
      type: Array,
      default: () => []
    },
    labelArr: {
      type: Array,
      default: () => []
    },
    btnFalse: {
      type: Boolean,
      default: true
    },
    selectFalse: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    queryData () {
      this.$emit('queryData')
    },
    reload () {
      this.$emit('reload')
    },
    add () {
      this.$emit('add')
    }
  },
}
</script>

<style>
</style>